<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.colok{
		width:200px;
		height:50px;
		background:#000;
		color:#0f0;
		font-weight:bold;
		border-radius:50px;
		text-align:center;
		line-height:50px;
		font-size:30px;

	}
	</style>
</head>
<body>
	<div class="colok">
	<span id='sid'>10:10:00</span>
	</div>
	<br>
	<button id='bid'>stop</button>
	<button id='bid2'>start</button>

</body>
<script type="text/javascript">

	
function getDate(){
	dobj=new Date();
    hour=dobj.getHours();
    if(hour<10){
		hour='0'+hour;
	}
	minute=dobj.getMinutes();
	if(minute<10){
		minute='0'+minute;
	}
	second=dobj.getSeconds();
	if(second<10){
		second='0'+second;
	}
	str=hour+':'+minute+':'+second;

    sidobj=document.getElementById('sid');

    sidobj.innerHTML=str;
}


getDate();
start();
function stop(){
	clearInterval(sobj);
}
function start(){
	sobj=setInterval(getDate,1000);	
}
sobj=setInterval(getDate,1000);
//stop the colok
bidobj=document.getElementById('bid');
bidobj.onclick=function(){
	stop();
}
//start the colock
bid2obj=document.getElementById('bid2');
bid2obj.onclick=function(){
start();
}
	
</script>
</html>